﻿@{
    Layout = "~/Views/Shared/_VueLayout.cshtml";

}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>StringOperate</title>
    <style type="text/css">
        .diveditor {
            width: 45%;
            height: 100%;
            float: left
        }

            .diveditor textarea {
                width: 100%;
                height: 800px;
            }
    </style>
</head>
<body>
    <div id="app" style=" width: 100%; height: 100%;">
        <div style="margin-bottom:5px">
            <template>
                <el-input placeholder="请输入被替换内容" style="width: 150px" size="mini" v-model="replaceStrOld"/>
            </template>
            <template>
                <el-input placeholder="请输入替换内容" style="width: 150px" size="mini" v-model="replaceStrNew"/>
            </template>
            <el-button style="margin-left:-5px" type="primary" size="mini" @@click="replace()">替换</el-button>
            <el-button type="primary" size="mini" @@click="contrast()">对比</el-button>
        </div>
        <div>
            <el-row>
                <el-col :span="12">
                    <textarea id="oldTextarea" style="height: 800px;" v-model="oldStr"></textarea>
                </el-col>
                <el-col :span="12">
                    <textarea id="newTextarea" v-model="newStr"></textarea>
                </el-col>
            </el-row> 
        </div>
    </div>
    @*http://tinymce.ax-z.cn/advanced/some-example.php*@
    <script src="/js/StrComparison.js"></script>
    <script src="/tinymce/tinymce.min.js"></script>
    <script>
        var vueApp = undefined;
        var vm = new Vue({
            el: '#app',
            data: function () {
                vueApp = this;
                return {
                    replaceStrOld: undefined,
                    replaceStrNew: undefined,
                    oldStr: undefined,
                    newStr: undefined
                };
            },
            filters: {

            },
            created() {
                vueApp.showTinymce();
            },
            methods: {
                showTinymce() {
                    window.tinymce.init({
                        selector: '#oldTextarea',
                        toolbar: '',
                        height: 770,
                        menu: {

                        },
                        menubar: '',
                        setup: function () {

                        }
                    });
                    window.tinymce.init({
                        selector: '#newTextarea',
                        toolbar: '',
                        height: 770,
                        menu: {

                        },
                        menubar: '',
                        setup: function () {

                        }
                    });
                },
                //对比
                contrast() {
                    CompareTxt('oldTextarea', 'newTextarea');
                    vueApp.showTinymce();
                },
                //替换
                replace() {
                    var val = window.tinyMCE.editors["oldTextarea"].getContent({ format: 'text' });
                    while (val.indexOf(vueApp.replaceStrOld) > -1) {
                        val = val.replace(vueApp.replaceStrOld, vueApp.replaceStrNew);
                    };
                    window.tinyMCE.editors["newTextarea"].setContent(val);
                },
                colorContent() {
                    window.tinyMCE.editors["oldTextarea"].execCommand('ForeColor', false, '#f33');
                }
            }
        });
    </script>
</body>
</html>
